<template>
  <div style="padding: 10px 15px;" class="overflowY">
    <div class="searchGroup_list" style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">

      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">标题: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="queryCondition.title" placeholder="请输入标题"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">关键字: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="queryCondition.keyword" placeholder="请输入关键字"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="9" :xl="6">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="5">
                <span class="searchListName">上传日期: </span>
              </el-col>
              <el-col :span="9">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="queryCondition.uploadTimeStart"
                    type="date"
                    value-format="yyyyMMddHHmmss"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="1">
                <span class="searchListNameOther">~</span>
              </el-col>
              <el-col :span="9">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="queryCondition.uploadTimeEnd"
                    value-format="yyyyMMddHHmmss"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
            <el-button type="primary" size="mini" @click="toAddRecord">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="fetchData">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table
        ref="singleTable"
        :data="tableData"
        tooltip-effect="dark"
        @row-contextmenu="rowContextmenu"
        @cell-dblclick="cellClick"
        @row-click="rowClick"
        @sort-change="sortChange"
        highlight-current-row
        height="340"
        style="width: 100%">
        <el-table-column
          width="50"
          align="center"
          label="序号">
          <template slot-scope="scope">
            <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * 10 + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="libraryCategoryName"
          align="center"
          sortable="custom"
          label="文档分类">
        </el-table-column>
        <el-table-column
          width="240"
          prop="name"
          align="left"
          sortable="custom"
          label="文档名称">
        </el-table-column>
        <el-table-column
          width="240"
          prop="title"
          align="left"
          sortable="custom"
          label="文档标题">
        </el-table-column>
        <el-table-column
          width="240"
          prop="keyword"
          align="left"
          sortable="custom"
          label="文档标签或关键字">
        </el-table-column>
        <el-table-column
          prop="type"
          width="100"
          align="center"
          label="文档类型">
        </el-table-column>
        <el-table-column
          prop="size"
          width="150"
          align="left"
          label="文档大小"
          :formatter = "sizeFormat">
        </el-table-column>
        <el-table-column
          prop="fcTime"
          width="150"
          align="left"
          sortable="custom"
          label="上传时间">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <div class="tableBtnBox">
              <el-tooltip class="item" effect="dark" content="下载" placement="top">
                <el-button type="success" size="mini" @click="toDownloadRecord(scope.row)" icon="el-icon-download" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改" placement="top">
                <el-button type="primary" size="mini" @click="toEditRecord(scope.row)" icon="el-icon-edit" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="danger" size="mini" @click="deleteRecord(scope.row)" icon="el-icon-delete" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="转换为PDF" placement="top">
                <el-button type="warning" size="mini" v-if="scope.row.isConvert == '0'" @click="convertRecord(scope.row)" icon="el-icon-refresh" circle></el-button>
                <el-button type="warning" size="mini" v-else disabled  icon="el-icon-refresh" circle></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange"
                :current-change="pagingQuery"
                :page-sizes="pageSizes"
                :page-num="pagingArgs.currentPageNo"
                :total-num="pagingArgs.totalCount">
        </paging>
      </div>
    </div>
  </div>
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页
// import modify from '@/assets/images/myImg/modify.png'
// import deleteIcon from '@/assets/images/myImg/deleteIcon.png'
// import implement from '@/assets/images/myImg/implement.png'
// import recovery from '@/assets/images/myImg/recovery.png'
// import suspend from '@/assets/images/myImg/suspend.png'
// import paging from '@/components/demoAssembly/paging' // 分页

export default {
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      // 分页参数
      pagingArgs: {
        currentPageNo: 1,
        totalCount: 0
      },
      tableData: [], // 列表数据
      queryArgs: {
        sort: [
          {
            property: 'fcTime',
            direction: 'DESC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 10
        }
      }, // 查询参数
      queryCondition: {
        title: '',
        keyword: '',
        uploadTimeStart: '',
        uploadTimeEnd: ''
      },
    }
  },
  computed: {

  },
  filters: {

  },
  components: {
    paging
  },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    rowClick() {
      // 行单击事件
    },
    cellClick(row, column, cell, event) {
      // 列单击事件
    },
    rowContextmenu(row, column, e) {
      // 右键菜单
      window.event.returnValue = false
    },
    pageSizeChange(val) {
      this.queryArgs.rowBounds.limit = val
      this.queryArgs.rowBounds.offset = 0
      this.pagingArgs.currentPageNo = 1
      this.fetchData()
    },
    sortChange(col) {
      //
      console.log(col)
      if (col.prop) {
        let tempDirection = 'ASC'
        if (col.order === 'descending') {
          tempDirection = 'DESC'
        }
        const sort = {
          property: col.prop,
          direction: tempDirection
        }
        this.queryArgs.sort = []
        this.queryArgs.sort.push(sort)
        this.fetchData()
      }
    },
    pagingQuery(val) { // 分页
      this.queryArgs.rowBounds.offset = (val - 1) * 10
      this.pagingArgs.currentPageNo = val
      this.fetchData()
    },
    buildQueryConditions() {
      let tempQueryCondition = []

      // 标题
      if (this.queryCondition.title != null && this.queryCondition.title !== '') {
        const queryTitle = {
          property: 'title',
          value: this.queryCondition.title,
          type: 'LIKE'
        }
        tempQueryCondition.push(queryTitle)
      }

      // 关键字
      if (this.queryCondition.keyword != null && this.queryCondition.keyword !== '') {
        const queryKeyword = {
          property: 'keyword',
          value: this.queryCondition.keyword,
          type: 'LIKE'
        }
        tempQueryCondition.push(queryKeyword)
      }

      // 上传时间开始
      if (this.queryCondition.uploadTimeStart != null && this.queryCondition.uploadTimeStart !== '') {
        const queryUploadTimeStart = {
          property: 'fcTime',
          value: this.queryCondition.uploadTimeStart,
          type: 'GE'
        }
        tempQueryCondition.push(queryUploadTimeStart)
      }

      // 上传时间结束
      if (this.queryCondition.uploadTimeEnd != null && this.queryCondition.uploadTimeEnd !== '') {
        const queryUploadTimeEnd = {
          property: 'fcTime',
          value: this.queryCondition.uploadTimeEnd,
          type: 'LE'
        }
        tempQueryCondition.push(queryUploadTimeEnd)
      }
      return tempQueryCondition
    },
    fetchData() { // 获取内容
      this.queryArgs.condition = this.buildQueryConditions()
      this.$store
        .dispatch('LibraryDocQueryMyDoc', this.queryArgs)
        .then(res => {
          this.tableData = res.data.records
          this.pagingArgs.totalCount = res.data.count
        })
        .catch(() => {

        })
    },
    sizeFormat(row, column) {
      let size = row.size
      let unit = ' B'
      if (size > 1024 * 2014) {
        size = size / 1024
        unit = ' KB'
      }
      if (size > 1024 * 2014) {
        size = size / 1024
        unit = ' MB'
      }
      if (size > 1024 * 2014) {
        size = size / 1024
        unit = ' GB'
      }
      return Math.round(size) + unit
    },
    toDownloadRecord(record) {
      //
      // this.downloadFileSrc = record.downloadSourcePath + '?_t=' + new Date().getTime()
      let downloadElement = document.createElement('a')
      downloadElement.target = '_blank'
      downloadElement.href = record.downloadSourcePath // 此处可以通过拼接字符串的方式传递参数
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成之后移除元素
    },
    toAddRecord(record) {
      //
      this.$router.push({
        name: 'libraryDocMyDocAdd',
        params: {}
      })
    },
    toEditRecord(record) {
      //
      this.$router.push({
        name: 'libraryDocMyDocEdit',
        params: {
          id: record.id
        }
      })
    },
    deleteRecord(record) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$store.dispatch('LibraryDocDelete', record).then(res => {
          this.fetchData()
          this.loading = false
          this.$message({
            type: 'info',
            message: '删除成功！'
          })
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            message: '删除异常！'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    convertRecord(record) {
      this.loading = true
      this.$store.dispatch('LibraryDocConvertToPDF', record).then(res => {
        this.loading = false
        this.$message({
          type: 'info',
          message: '文件已在后台转化！'
        })
        setTimeout(this.fetchData(), 50)
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'warning',
          message: '文件转化异常！'
        })
      })
    }
  }
}
</script>
<style scoped>
  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchGroup_list .searchListNameOther{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
  }
  .searchTime{
    width: 100%;
  }
  .searchTime > div{
    width: 100%;
  }

  .logonRelease_title span{
    font-size: 22px;
    color: #333333;
    display: inline-block;
  }
  .logonRelease_content{
    width: 100%;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

</style>

